<template>
    <div class="c-gauge">
        <canvas id="canvas" style="width:320px;height:230px;"></canvas>
        <!--<div class="flex-wrap" style="margin-bottom: 10px">-->
        <!--<div class="card"><span class="dot" style="background-color: mediumseagreen;"></span>第一阶梯</div>-->
        <!--<div class="card"><span class="dot" style="background-color: sandybrown;"></span>第二阶梯</div>-->
        <!--<div class="card"><span class="dot" style="background-color: orangered;"></span>第三阶梯</div>-->
        <!--</div>-->
    </div>
</template>
<script>
    import instrument from '../js/instrument.js'

    export default {
        data() {
            return {
                gauge: '',
                ladder: {
                    volumeFirst: app.util.localStorage('user.ladderVolumeFirst') ? parseInt(app.util.localStorage('user.ladderVolumeFirst')) : 0,
                    volumeSecond: app.util.localStorage('user.ladderVolumeSecond') ? parseInt(app.util.localStorage('user.ladderVolumeSecond')) : 144,
                    volumeThree: app.util.localStorage('user.ladderVolumeThree') ? parseInt(app.util.localStorage('user.ladderVolumeThree')) : 204
                }
            }
        },
        props: {
            keyword: {
                type: String,
                default: 'id'
            },
            value: {
                type: Number,
                default: 0
            }
        },
        methods: {
            init() {
                instrument.init({
                    renderTo: 'canvas',
                    value: this.value,
                    width: "640",
                    height: "460",
                    maxDosage: this.ladder.volumeThree + this.ladder.volumeSecond - this.ladder.volumeFirst,//最大值
                    scoleList: [this.ladder.volumeFirst, this.ladder.volumeSecond, this.ladder.volumeThree]
                })

            }
        }
    }
</script>
